<template>
  <div class="bigDiv">
    <div class="title">
      <span>菜单组件</span>
    </div>
    <ul>
      <li
        v-for="(item, index) in menuList"
        :key="index"
        class="menuLi"
        @click="menuClick(item)"
      >
        <a>{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "myMenu",
  data() {
    return {
      menuList: [],
    };
  },
  created() {
    this.getmenu();
  },
  mounted() {},
  methods: {
    getmenu: function () {
      this.menuList = [
        { name: "菜单1", value: "menu1", path: "/menu1", component: "menu1" },
        { name: "菜单2", value: "menu2", path: "/menu2", component: "menu2" },
        { name: "菜单3", value: "menu3", path: "/menu3", component: "menu3" },
        { name: "菜单4", value: "menu4", path: "/menu4", component: "menu4" },
        {
          name: "关注项目",
          value: "attentionPro",
          path: "/attentionPro",
          component: "attentionPro",
        },
      ];
    },
    menuClick: function (menu) {
      if (this.$route.path != "/" + menu.value) {
        this.$store.commit("increment");
        console.log(this.$store.state.count);
        this.$set(this.$store.state, "menuName", menu.name);
        this.$set(this.$store.state, "menuValue", menu.value);
        this.$router.push({
          path: "/" + menu.value,
          // name: menu.value,
          // component: menu.component,
        });
      }
    },
  },
};
</script>
<style scoped>
.bigDiv {
  height: 100%;
}
.menuLi {
}
.title {
  text-align: left;
  margin-left: 2rem;
}
ul{
  padding: 0cm;
}
li {
  list-style-type: none;
  text-align: left;
  padding-left: 3rem;
}
</style>
